<template>
	<view class="team_item">
		<u-image class="img" mode="aspectFill" height="180" width="180" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=624607742,1541761777&fm=26&gp=0.jpg"></u-image>
		<view class="rightCon">
			<view class="tit">
				北京国际志愿者服务队北京国际志愿者服务队北京国际志愿者服务队北京国际志愿者服务队北京国际志愿者服务队北京国际志愿者服务队北京国际志愿者服务队北京国际志愿者服务队
			</view>
			<view class="palce">
				<text class="iconfont icondingwei icon"></text>
				<text class="position">北京市海淀区学院路学清路双北京市海淀区学院路学清路双</text>
			</view>
			<view class="tags">
				<view class="tag">
					<text class="count">1</text>
					<text class="name">城市排名</text>
				</view>
				<view class="tag">
					<text class="count">663人</text>
					<text class="name">志愿者</text>
				</view>
				<view class="tag">
					<text class="count">40个</text>
					<text class="name">志愿活动</text>
				</view>
				<view class="tag">
					<text class="count">7000h</text>
					<text class="name">服务时长</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";
	.team_item {
		width: 100%;
		position: relative;
		padding: 20rpx 0;
		display: flex;

		.rightCon {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			justify-content: space-between;

			.tit {
				word-break: break-all;
				overflow: hidden; // 超出的文本隐藏
				text-overflow: ellipsis;
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
				-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				-webkit-line-clamp: 1; // 结合上面两个属性，表示显示的行数。

				font-size: 26rpx;
				font-weight: 600;
				color: #333333;

			}

			.palce {
				font-size: 22rpx;
				display: flex;
				height: 30rpx;
				align-items: center;
				.iconfont {
					color: #666666;
					margin-right: 2rpx;
					// margin-top: -4rpx;
					font-size: 25rpx;
				}
				.position{
					word-break: break-all;
					overflow: hidden; // 超出的文本隐藏
					text-overflow: ellipsis;
					display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp: 1; // 结合上面两个属性，表示显示的行数。
					line-height: 30rpx;
				}
			}

			.tags {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.tag {
					width: 102rpx;
					height: 97rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					border-radius: 7rpx;

					&:nth-child(1) {
						background: #DCF0FF;

						>.count {
							color: #0091FF;
						}
					}

					&:nth-child(2) {
						background: #FFF4E2;

						>.count {
							color: #F97000;
						}
					}

					&:nth-child(3) {
						background: #E9FFD8;

						>.count {
							color: #00AC4F;
						}
					}

					&:nth-child(4) {
						background: #FFF5F5;

						>.count {
							color: #CE3A29;
						}
					}

					.count {
						font-size: 26rpx;
						font-weight: 600;
					}

					.name {
						font-weight: 400;
						color: #333333;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>
